<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
        <title><?php echo $conf['sitename']; ?> - <?php echo $title ?></title>
        <link rel="stylesheet" href="pay/layui.css">
        <link rel="stylesheet" type="text/css" href="<?=userassets?>sdk/pay/header.css">
        <link rel="stylesheet" type="text/css" href="<?=userassets?>sdk/pay/public.css">
        <link rel="stylesheet" type="text/css" href="<?=userassets?>sdk/pay/min-paydemo.css">

    </head>

    <body style="background-color: #FFFFFF;" class="theme-colorful">
        <div class="page">
            <div class="header-container">
                <div class="header-title-box">
                    <a class="header-logo" href="/">
                        <img src="<?php echo '/Core/assets/img/logo.png' ?>" width="150px" alt="">
                    </a>
                </div>
                <div class="links-drawer-box ">
                    <div class="drawer-line-top"></div>
                    <div class="drawer-line-bottom"></div>
                </div>
            </div>

            <div class="header-drawer-container">
                <a class="drawerLink-box" target="_bank" href="/">
                    <p>首页</p>
                </a>
                <div class="line-xipiden"></div>
                <a class="drawerLink-box" target="_bank" href="/User/Doc">
                    <p>开发文档</p>
                </a>
                <div class="line-xipiden"></div>
                <a class="drawerLink-box login" href="/User/login">
                    <p>登录</p>
                </a>
                <div class="line-xipiden"></div>
                <a class="drawerLink-box login" href="/User/reg">
                    <p>注册</p>
                </a>
            </div>
            <div class="container">
                <div class="input-box">
                    <div class="logo-box"></div>
                    <div class="amount-input">
                        <input type="hidden" id="ddh" value="<?php echo date("YmdHis") . mt_rand(100, 999); ?>" />
                        <input type="hidden" id="name" value="测试商品" />
                        <input class="input" type="number" id="money" value="0.1" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" onblur="b=this.value;b=(b+'').replace(/^0+\./g,'0.');b.match(/^0+[1-9]+/)?b=b.replace(/^0+/g,''):b;this.value=Number(b)?b:0;">
                    </div>
                    <p class="tips-text">可在输入框内输入自定义金额</p>
                    <input type="hidden" name="csrf_token" value="223f47ff753167bf06a74dc5dfad107e">
                </div>
                <div class="dex-box">
                    <div class="dex-text">
                        <p style="margin-bottom: 15px; font-size: 20px; font-weight: 900">
                            支付体验
                        </p>
                        <p>自定义金额体验支持微信,支付宝,QQ等多种付款方式</p>
                    </div>
                    <div class="pay-button">
                        <p id="buttonText">立即支付</p>
                    </div>
                </div>
                </div>
            <div class="mask"></div>
            <div class="pay-window">

                <div class="pay-box">

                    <div class="wxpay paytest">
                        <div class="pay-item-box" onclick="submitPay('alipay')">
                            <div class="icon">
                                <img src="/Core/assets/icon/alipay.ico">
                            </div>
                            <p>支付宝</p>
                        </div>
                    </div>
                    <div class="hr"></div>

                    <div class="wxpay paytest">
                        <div class="pay-item-box" onclick="submitPay('qqpay')">
                            <div class="icon">
                                <img src="/Core/assets/icon/qqpay.ico">
                            </div>
                            <p>QQ支付</p>
                        </div>
                    </div>
                    <div class="hr"></div>

                    <div class="wxpay paytest">
                        <div class="pay-item-box" onclick="submitPay('wxpay')">
                            <div class="icon">
                                <img src="/Core/assets/icon/wxpay.ico">
                            </div>
                            <p>微信支付</p>

                        </div>
                    </div>
                    <div class="hr"></div>
                    <div class="usdt paytest">
                        <div class="pay-item-box" onclick="submitPay('usdt')">
                            <div class="icon">
                                <img src="/Core/assets/icon/usdtpay.ico">
                            </div>
                            <p>USDT-TRC20</p>

                        </div>
                        

                    </div>
                    <div class="hr"></div>
                    <div class="cancel">取消</div>
                </div>
            </div>
            <div class="none-show">
                <img src="https://www.jeequan.com/jee/images/payType/pc-tips.svg" alt="pc-tips">
                <p>该页面为H5支付体验，请在移动端打开</p>
            </div>
            <script src="/Core/assets/admin/assets/pear/component/layui/layui.js"></script>
             <script>
                layui.cache.page = '';
                layui.use(['jquery', 'form'], function() {
                    var $ = layui.jquery;

                    const userAgent = navigator.userAgent;
                    $(".links-drawer-box").click(function() {
                        if (!$(this).children(".drawer-line-top").hasClass('open-top')) {
                            $(this).children(".drawer-line-top").addClass("open-top");
                            $(this).children(".drawer-line-bottom").addClass("open-bottom")
                            $(".header-drawer-container").addClass("container-open")
                            $('body').css({
                                "height": "100vh",
                                "overflow": "hidden"
                            })
                        } else {
                            $(this).children(".drawer-line-top").removeClass("open-top");
                            $(this).children(".drawer-line-bottom").removeClass("open-bottom")
                            $(".header-drawer-container").removeClass("container-open")
                            $('body').css({
                                "height": "auto",
                                "overflow": "initial"
                            })
                        }
                    });
                    $(".header-drawer").hover(function() {
                        var son = $(this).children(".drawer-off"),
                            linksHeight = $(this).find(".header-resources-drawer-box").height();
                        son.stop().animate({
                            height: linksHeight + 10 + "px",
                            paddingTop: "10px",
                            top: "80px",
                        }, 250);
                    }, function() {
                        var son = $(this).children(".drawer-off");
                        son.stop().animate({
                            height: "0",
                            padding: "0",
                            top: "108px",
                        }, 150);
                    });
                    var pagePath = window.location.pathname,
                        pathCenter = pagePath.slice(11, -5),
                        document = "document",
                        blog = "blog",
                        community = "community";

                    if (pathCenter == document) {
                        $(".document-title").css({
                            display: "block",
                        });
                    } else if (pathCenter == blog) {
                        $(".blog-title").css({
                            display: "block",
                        });
                    } else if (pathCenter == community) {
                        $(".community-title").css({
                            display: "block",
                        });
                    };
                    var inputValue = $(".input").val(); //初始value
                    function inputFun() {
                        $("#buttonText").html("立即支付");
                    }
                    inputFun(); //初始调用
                    $(".input").bind("input propertychange", function() {
                        //输入实时触发
                        inputValue = $(".input").val(); //重置value
                        var _this = $(this);
                        var inputLength = _this.val().length;
                        var inputWidht = parseInt(inputLength) * 11.5 + 25;
                        var companyWidth = $(".company").outerWidth();
                        _this.css("width", inputWidht + "px"); //输入框宽度随内容变化
                        $(".amount-input").css("width", inputWidht + companyWidth + 20 + "px"); //容器宽度实时变化
                        inputFun(); //调用按钮文字同步方法
                    });
                    $("input").blur(function() {
                        //失焦时删除多输入的0，然后同步到按钮上
                        inputValue = $(".input").val();
                        inputFun();
                    });
                    $(".pay-button").on("click", function() {
                        $(".mask").css({
                            visibility: "visible",
                            opacity: 1,
                        });
                        $(".pay-window").css({
                            bottom: "10px",
                        });
                    });
                    $(".cancel").on("click", function() {
                        $(".mask").css({
                            visibility: "hidden",
                            opacity: 0,
                        });
                        $(".pay-window").css({
                            bottom: "-220px",
                        });
                    });
                    $(".mask").on("click", function() {
                        $(".mask").css({
                            visibility: "hidden",
                            opacity: 0,
                        });
                        $(".pay-window").css({
                            bottom: "-220px",
                        });
                    });

                    // 生成订单号
                    window.submitPay = function(obj) {
                        var money = $("#money").val();
                        var ddh = $("#ddh").val();
                        var name = $("#name").val();
                        var type = obj;
                        if (money == '') {
                            notice.msg("金额不能为空", {
                                icon: 2
                            });
                            return false;
                        }
                        window.location.href = "/User/api.php?s=submit_sdkpay&WIDout_trade_no=" + ddh + "&WIDtotal_fee=" + money + "&WIDsubject=" + name + "&type="+type;
                        return false;
                    }

                })
            </script>